<template>
	<h2 class="header">营养菜谱</h2>
	<view class="page">
		<view class="first-row">	
			<uni-icons type="search" size="22" class="search-icon"></uni-icons>
			<input class="input" placeholder="搜索营养菜谱" />
		</view>
			
		<image src="../../../static/picture/meishi2.jpg" class="knowledge-image" ></image>
		<view class="knowledge-title">年龄阶段</view>
		<view class="row-item" >
			<view class="col-1" >
				<button class="sign-button" plain="true"><text class="text-1">6月龄</text></button>
			</view>
			<view class="col-2" @click="toRecipeList">
				<button class="sign-button" plain="true"><text class="text-2">7月龄</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">8月龄</text></button>			
			</view>		
		</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">9月龄</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">10月龄</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">11月龄</text></button>			
			</view>		
		</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">12月龄</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">18月龄</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">24月龄</text></button>			
			</view>		
		</view>

		<view class="knowledge-title">生病菜谱</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">发烧</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">感冒</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">腹泻</text></button>			
			</view>		
		</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">咳嗽</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">呕吐</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">皮疹</text></button>			
			</view>		
		</view>
		<view class="knowledge-title">食材分类</view>
		<view class="row-item" >
			<view class="col-1">
				<button class="sign-button" plain="true"><text class="text-1">蛋黄泥</text></button>
			</view>
			<view class="col-2">
				<button class="sign-button" plain="true"><text class="text-2">蛋黄泥</text></button>
			</view>
			<view class="col-3">
				<button class="sign-button" plain="true"><text class="text-3">蛋黄泥</text></button>			
			</view>		
		</view>
	
		
	</view>
</template>
<script setup>

const toRecipeList =()=>{
	uni.navigateTo({
		url: '/pages/recipe/list/list' 
	});
}

</script>
<style scoped>
.page{
	padding: 0rpx 30rpx;
}
.header {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	padding: 18rpx 30rpx;
	border-bottom: 6rpx solid #f2f2f2;
}	
.first-row{
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	background-color: #f2f2f2;
	border-radius: 30rpx;
	/* margin-left: 30rpx; */
}

.search-icon{
	display: flex;
	align-items: center;   
}
.input{
	height: 70rpx;
	flex: 1;
}
.knowledge-image{
	margin: 30rpx 30rpx;
	height: 260rpx;
	border-radius: 30rpx;
}
.knowledge-title{
	font-size: 36rpx;
	text-align: center;
	margin: 30rpx 0rpx;
}
.sign-button {
	width: 100px;
	height: 30px;
	line-height: 60rpx;
	font-size: 14px;
	color: #666EE8;
	background-color: #F0F1FD;
	border-color: #fff;
	margin: 0;
	padding: 0;
	/* text-align: center; */
}
.row-item{
	display: flex;
	justify-content: space-around; 
	margin-bottom: 20rpx;
}

</style>
